<template>
	<view class="container">
		<!-- 顶部安全区域占位 -->
		<!-- 	<view class="status-bar-safe-area">
			<text class="car-text">车辆维修</text>
		
			<view class="back-btn" @click="goBack">
				<image src="/static/back.png" mode="aspectFit" class="back-img"></image>
			</view>
		</view> -->

		<!-- 地图部分 - 增加顶部间距 -->
		<view class="map-wrapper">
			<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="markers"
				show-location></map>
		</view>

		<!-- 内容区域 - 使用弹性布局推到底部 -->
		<view class="content-wrapper">
			<!-- 门店信息卡片 -->
			<view class="shop-card" @click="goToShopDetail">
				<view class="shop-header">
					<text class="shop-name">{{ shop.name }}</text>
					<text class="distance">{{ shop.distance }}</text>
				</view>

				<!-- 评分 -->
				<view class="rating">
					<uni-rate :value="shop.score" size="18" color="#ccc" activeColor="#FFD700" readonly />
					<text class="score-text">{{ shop.score }}分</text>
				</view>

				<!-- 营业时间 -->
				<view class="shop-info">
					<uni-icons type="clock" size="18" color="#666" class="info-icon" />
					<text>营业时间：{{ shop.time }}</text>
				</view>

				<!-- 地址 -->
				<view class="shop-info">
					<uni-icons type="map-pin" size="18" color="#666" class="info-icon" />
					<text>位置：{{ shop.address }}</text>
				</view>

				<!-- 联系电话 -->
				<view class="shop-info">
					<uni-icons type="phone" size="18" color="#666" class="info-icon" />
					<text>电话：{{ shop.phone }}</text>
				</view>

				<!-- 门店图片 -->
				<view class="shop-img-container">
					<image class="shop-img" :src="shop.img" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="btn btn-contact" @click="contactShop">
				<uni-icons type="phone" size="20" color="#fff" />
				<text>联系门店</text>
			</view>
			<view class="btn btn-book" @click="bookNow">
				<uni-icons type="time" size="20" color="#fff" />
				<text>立即预定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 35.2381, // 焦作
				longitude: 113.2331,
				markers: [{
					id: 1,
					latitude: 35.2381,
					longitude: 113.2331,
					title: "车百事汽车生活馆",
					iconPath: "/static/location.png",
					width: 30,
					height: 30
				}],
				shop: {
					name: "车百事汽车生活馆",
					score: 4.8,
					time: "周一至周五 早上8:00-晚上22:00",
					address: "山阳区人民路与解放路交叉口",
					distance: "556m",
					img: "/static/shop.jpg",
					phone: "123456789"
				},
				statusBarHeight: 0 // 状态栏高度
			}
		},
		onLoad() {
			// 获取状态栏高度，用于适配不同设备
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			contactShop() {
				// 获取当前运行环境
				const platform = uni.getSystemInfoSync().platform;

				// 在手机端（安卓或iOS）调用拨打电话功能
				if (platform === 'android' || platform === 'ios') {
					uni.makePhoneCall({
						phoneNumber: this.shop.phone
					});
				} else {
					// 在网页端显示电话号码并给出提示
					uni.showModal({
						title: '联系门店',
						content: `门店电话：${this.shop.phone}\n请在手机上拨打`,
						showCancel: false
					});
				}
			},
			bookNow() {
				// 在当前页面调用，跳转到 pages/detail 页面
				uni.navigateTo({
					url: '/pages/car-repair-model/appointment/appointment' // 可携带参数
				});
			},
			goToShopDetail() {
				// 携带门店ID等参数跳转到详情页
				uni.navigateTo({
					url: '/pages/car-repair-model/storedetail/storedetail'
				});
			}
		},
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background: linear-gradient(180deg, #f7f9fc 0%, #f0f4ff 100%);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.status-bar-safe-area {
		height: 150rpx;
		width: 100%;
		background: linear-gradient(90deg, #2a8cff 0%, #5aa9ff 100%);
		display: flex;
		justify-content: center;
		align-items: flex-end;
		padding-bottom: 10rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	}

	.car-text {
		color: #fff;
		font-size: 34rpx;
		font-weight: 700;
		letter-spacing: 1rpx;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
	}

	// 地图区域
	.map-wrapper {
		position: relative;
		height: 1000rpx;
		width: 100%;
		background: #fff;
		margin: 24rpx 20rpx 12rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 24rpx rgba(41, 96, 164, 0.18);
		border: 1rpx solid rgba(42, 140, 255, 0.15);
	}

	// 返回按钮
	.back-btn {
		position: absolute;
		top: 90rpx;
		left: 20rpx;
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.9);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		transition: all 0.3s ease;
	}

	// 返回按钮图片样式
	.back-img {
		width: 36rpx; // 设置合适的宽度
		height: 36rpx; // 设置合适的高度
		tint-color: #2a8cff; // 可以给图片统一着色，与主题色匹配

	}

	.back-btn:active {
		transform: scale(0.95);
		background: rgba(255, 255, 255, 1);
	}

	// 内容区域 - 推到底部
	.content-wrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-bottom: 140rpx; // 为底部按钮留出空间
	}

	// 门店卡片
	.shop-card {
		background: #ffffff;
		margin: 20rpx;
		padding: 32rpx;
		border-radius: 24rpx;
		box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
		transform: translateY(0);
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);
		}

		.shop-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.shop-name {
				font-size: 36rpx;
				font-weight: 700;
				color: #1f2d3d;
				position: relative;
				padding-left: 20rpx;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 28rpx;
					background: linear-gradient(180deg, #2a8cff 0%, #1c6bff 100%);
					border-radius: 3rpx;
				}
			}

			.distance {
				font-size: 26rpx;
				color: #2a8cff;
				background: rgba(42, 140, 255, 0.1);
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-weight: 600;
			}
		}

		.rating {
			margin: 20rpx 0;
			display: flex;
			align-items: center;

			.score-text {
				font-size: 28rpx;
				color: #ff6600;
				margin-left: 12rpx;
				font-weight: 600;
			}
		}

		.shop-info {
			font-size: 26rpx;
			color: #6b7a90;
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			line-height: 1.5;

			.info-icon {
				margin-right: 12rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.shop-img-container {
			margin-top: 24rpx;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		}

		.shop-img {
			width: 100%;
			height: 220rpx;
			border-radius: 20rpx;
			transition: transform 0.5s ease;

			&:hover {
				transform: scale(1.03);
			}
		}
	}

	// 底部按钮栏
	.bottom-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 30rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.08);
		z-index: 999;
		box-sizing: border-box;
		border-top: 1rpx solid rgba(0, 0, 0, 0.04);

		.btn {
			flex: 1;
			margin: 0 12rpx;
			padding: 28rpx 0;
			border-radius: 38rpx;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 600;
			transition: all 0.3s ease;
			letter-spacing: 1rpx;

			text {
				margin-left: 12rpx;
			}

			&:active {
				transform: translateY(2rpx) scale(0.98);
			}
		}

		.btn-contact {
			background: linear-gradient(90deg, #2a8cff 0%, #1c6bff 100%);
			box-shadow: 0 8rpx 16rpx rgba(42, 140, 255, 0.32);
		}

		.btn-book {
			background: linear-gradient(90deg, #ff6600 0%, #ff5500 100%);
			box-shadow: 0 8rpx 16rpx rgba(255, 102, 0, 0.32);
		}
	}
</style>